revision:
This is the standard and recommended way.
examples
code:
<script>
// Create a new <div> element
const div = document.createElement('div');
div.textContent = 'Hello, world!';
div.className = 'my-class';
// Append it to the body (or another parent element)
document.body.appendChild(div);
</script>
code:
<script>
// Create a new button element
const button = document.createElement('button')
button.textContent = 'Click Me'
button.className = 'btn btn-primary'
button.setAttribute('data-action', 'submit')
document.body.appendChild(button);
// Create a card with multiple child elements
const card = document.createElement('div')
card.className = 'card'
const cardHeader = document.createElement('div')
cardHeader.className = 'card-header'
cardHeader.textContent = 'User Profile'
const cardBody = document.createElement('div')
cardBody.className = 'card-body'
cardBody.innerHTML = '<p>Welcome to your profile!</p>'
// Assemble the card
card.appendChild(cardHeader)
card.appendChild(cardBody)
// Add to the DOM
document.body.appendChild(card)
</script>
You can insert HTML as a string into an existing element.
code:
<div id="container"></div>
<script>
const container = document.getElementById('container');
container.innerHTML = '<p>This is a paragraph created with innerHTML.</p>';
</script>
Note: avoid using innerHTML with untrusted user input—it can lead to XSS (cross-site scripting) vulnerabilities.
This method lets you insert HTML at specific positions relative to an element.
Positions:'beforebegin', 'afterbegin', 'beforeend', 'afterend'
code:
<div id="container1"></div>
<script>
const container1 = document.getElementById('container1');
container1.insertAdjacentHTML('beforeend', '<p>New paragraph!</p>');
</script>
When adding many elements, use a "DocumentFragment" to minimize reflows.
code:
<script>
const fragment = document.createDocumentFragment();
for (let i = 0; i < 5; i++) {
const p = document.createElement('p');
p.textContent = `Paragraph ${i + 1}`;
fragment.appendChild(p);
}
document.body.appendChild(fragment);
</script>
code:
<div id="container2">
</div>
<script>
// 1. Get or create the container element
const container2 = document.getElementById('container2'); // or any existing container
// 2. Create the <div> element
const myDiv = document.createElement('div');
myDiv.className = 'my-div-class';
myDiv.textContent = 'This is a div';
// 3. Create the <p> element
const myParagraph = document.createElement('p');
myParagraph.className = 'my-paragraph-class';
myParagraph.textContent = 'This is a paragraph';
// 4. Append both elements to the container
container2.appendChild(myDiv);
container2.appendChild(myParagraph);
</script>
code:
<div id="container3">
</div>
<script>
// 1. Get or create the container element
const container3 = document.getElementById('container3'); // or any existing container
// 2. Create the <div> element
const myDiv1 = document.createElement('div');
myDiv1.className = 'my-div-class';
myDiv1.textContent = 'This is a div';
// 3. Create the <p> element
const myParagraph1 = document.createElement('p');
myParagraph1.className = 'my-paragraph-class';
myParagraph1.textContent = 'This is a paragraph';
// 4. Append both elements to the container
container3.appendChild(myDiv1);
myDiv1.appendChild(myParagraph1);
</script>